<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" value=-1 name="first"></el-tab-pane>
      <el-tab-pane label="待付款" value=0 name="second"></el-tab-pane>
      <el-tab-pane label="已付款" value=1 name="third"></el-tab-pane>
      <el-tab-pane label="配送中" value=2 name="fourth"></el-tab-pane>
      <el-tab-pane label="已完成" value=3 name="firth"></el-tab-pane>
      <el-tab-pane label="售后" value=4 name="sixth"></el-tab-pane>
      <el-tab-pane label="已关闭" value=5 name="sevent"></el-tab-pane>
    </el-tabs>
    <el-row>
      <el-col :span="6">
        <el-input placeholder="搜索" @change="getSearchContent()" v-model="keyword">
          <el-button slot="append" icon="search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-date-picker style="margin-left:15px;" v-model="dateSelected" type="daterange" placeholder="选择日期范围" @change="selectDate">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table  :data="tableData" border v-loading.body="loading">
          <el-table-column type="expand">
            <template scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="收货人">
                  <span>{{ props.row.linkMan }}</span>
                </el-form-item>
                <el-form-item label="联系方式">
                  <span>{{ props.row.mobile }}</span>
                </el-form-item>
                <el-form-item label="人数">
                  <span>{{ props.row.peopleNumber }}</span>
                </el-form-item>
                <el-form-item label="收获地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="订单备注">
                  <span>{{ props.row.remark?props.row.remark:'无' }}</span>
                </el-form-item>
                <el-form-item label="期望送达时间">
                  <span>{{ props.row.remark?props.row.desireTime:'无' }}</span>
                </el-form-item>
                <el-collapse v-model="orderActive" @change="handleChange(props.row.order_id)">
                  <el-collapse-item title="商品详情" :name="props.row.order_id">
                    <template>
                      <el-table :data="orderList" style="width: 100%">
                        <el-table-column label="商品图标" width="180">
                          <template scope="orderItem">
                            <img style="width: 80px;height: 80px;margin-top: 10px;" :src="orderItem.row.icon" class="image">
                          </template>
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称" width="180">
                        </el-table-column>
                        <el-table-column prop="description" label="商品描述" width="180">
                        </el-table-column>
                        <el-table-column prop="price" label="商品价格">
                        </el-table-column>
                        <el-table-column prop="count" label="订购数量">
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-collapse-item>
                </el-collapse>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="订单号" min-width="150">
            <template scope="scope">
              <span>{{ scope.row.order_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单时间" min-width="150">
            <template scope="scope">
              <el-icon name="time"></el-icon>
              <span style="margin-left: 5px">{{ scope.row.orderTime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="订购总数" min-width="100">
            <template scope="scope">
              <span>{{ scope.row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" min-width="120">
            <template scope="scope">
              <span>¥ {{ scope.row.sumPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" min-width="120">
            <template scope="scope">
              <el-icon name="status"></el-icon>
              <el-tag :type="orderStatus(scope.row.status).btn">{{ orderStatus(scope.row.status).text }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template scope="scope">
              <el-button size="small" type="info" v-if="scope.row.status == 5" @click="handleOrder(scope.$index, scope.row.id,scope.row.status,scope.row.order_id)">已关闭</el-button>
              <el-button size="small" type="info" v-if="scope.row.status == 4" @click="handleOrder(scope.$index, scope.row.id,scope.row.status,scope.row.order_id)">立即处理</el-button>
              <el-button size="small" type="warning" v-if="scope.row.status == 3" @click="handleOrder(scope.$index, scope.row.id,scope.row.status,scope.row.order_id)">订单完成</el-button>
              <el-button size="small" type="warning" v-if="scope.row.status == 2" @click="handleOrder(scope.$index, scope.row.id,scope.row.status,scope.row.order_id)">确认送达</el-button>
              <el-button size="small" type="primary" v-if="scope.row.status == 1" @click="handleOrder(scope.$index, scope.row.id,scope.row.status,scope.row.order_id)">接受订单</el-button>
              <el-button size="small" type="danger" v-if="scope.row.status == 0" @click="handleOrder(scope.$index, scope.row.id,scope.row.status,scope.row.order_id)">关闭订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination :current-page.sync="currentPage" :page-size="5" layout="total, prev, pager, next" :total="total" @current-change="getOrder">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSellerOrder, getOrderList, updateOrder } from "@/api/order";
import { getToken } from "@/utils/auth";
import formatDate from "@/utils/date";
export default {
  data() {
    return {
      total: 0,
      keyword: "",
      activeName: "first",
      orderActive: "first",
      dateSelected: "",
      tableData: [],
      loading: true,
      currentPage: 1,
      status: -1,
      seller_id: 0,
      orderList: [],
      orderId: ""
    };
  },
  created() {
    let orderType = this.$route.query.type;
    if (orderType) {
      this.activeName = orderType;
    }

    this.$nextTick(() => {
      this.seller_id = getToken();
      this.getOrder();
    });
  },
  methods: {
    onSubmit() {
      this.$message("submit!");
    },

    getOrder() {
      let id = this.seller_id;
      let offset = this.currentPage;
      let keyword = this.keyword;
      let status = this.status;
      let date = this.dateSelected;
      getSellerOrder(id, offset, keyword, date, status).then(res => {
        this.loading = false;
        if (res.orders) {
          this.tableData = res.orders;

          this.tableData.map(item => {
            item.orderTime = formatDate(
              new Date(item.orderTime * 1),
              "yyyy-MM-dd"
            );
            return item;
          });

          this.total = res.count;
        }
      });
    },
    handleClick(tab) {
      this.status = tab.$attrs.value;
      this.getOrder();
    },
    orderStatus(v) {
      switch (v) {
        case 0:
          return {
            text: "待支付",
            btn: "gray"
          };
          break;
        case 1:
          return {
            text: "已付款，等待处理",
            btn: "warning"
          };
          break;
        case 2:
          return {
            text: "商品正在配送中",
            btn: "primary"
          };
          break;
        case 3:
          return {
            text: "交易成功，等待评价",
            btn: "success"
          };
          break;
        case 5:
          return {
            text: "交易关闭",
            btn: "danger"
          };
          break;
        case 4:
          return {
            text: "售后处理中",
            btn: "danger"
          };
          break;
      }
    },
    selectDate() {
      if (!this.dateSelected[0]) {
        this.dateSelected = "";
      }
      this.getOrder();
    },
    getSearchContent() {
      this.keyword.replace("'", "");
      this.getOrder();
    },
    handleChange(id) {
      this.orderActive = id;
      if (this.orderId == id) {
        return;
      }
      this.orderId = id;
      getOrderList(id).then(res => {
        console.log(res);
        if (res.status == 1) {
          this.orderList = res.orders;
        }
      });
    },
    handleOrder(index, id, status, order_id) {
      let orderId = id;
      let orderStatus = status;
      let updateStatus = -1;
      console.log(orderStatus, "999");
      switch (orderStatus) {
        case 0:
          this.$confirm("确定要关闭该订单?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateStatus = 5;
              updateOrder(id, updateStatus).then(res => {
                if (res.status == 1) {
                  this.$message({
                    type: "success",
                    message: "订单已关闭!"
                  });
                }
              });
            })
            .catch(() => {});
          break;
        case 1:
          this.$confirm("确定要接收该订单?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateStatus = 2;
              updateOrder(id, updateStatus).then(res => {
                if (res.status == 1) {
                  this.$message({
                    type: "success",
                    message: "订单已接受!"
                  });
                }
              });
            })
            .catch(() => {});
          break;
        case 2:
          this.$confirm("确认订单已经送达?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateStatus = 3;
              updateOrder(id, updateStatus).then(res => {
                if (res.status == 1) {
                  this.$message({
                    type: "success",
                    message: "订单已完成!"
                  });
                }
              });
            })
            .catch(() => {});
          break;
        case 3:
          this.$confirm("确认要回复评价？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateStatus = 3;
              updateOrder(id, updateStatus).then(res => {
                if (res.status == 1) {
                  this.$message({
                    type: "success",
                    message: "订单已完成!"
                  });
                }
              });
            })
            .catch(() => {});
        case 5:
          this.handleChange(order_id);
          break;
        case 4:
          this.$confirm("售后已经完成？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateStatus = 3;
              updateOrder(id, updateStatus).then(res => {
                if (res.status == 1) {
                  this.$message({
                    type: "success",
                    message: "订单已完成!"
                  });
                }
              });
            })
            .catch(() => {});
          break;
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>